<template>
  <div class="wrap">
    <div class="statistics-header">
      <div>
        <p class="label">今日注册数</p>
        <p class="label-data">{{ header.todayRegis }}</p>
      </div>
      <div>
        <p class="label">昨日注册数</p>
        <p class="label-data">{{ header.yesterdayRegis }}</p>
      </div>
      <div>
        <p class="label">前日注册数</p>
        <p class="label-data">{{ header.beforeRegis }}</p>
      </div>
      <div>
        <p class="label">本周注册数</p>
        <p class="label-data">{{ header.weekRegis }}</p>
      </div>
      <div>
        <p class="label">本月注册数</p>
        <p class="label-data">{{ header.monthRegis }}</p>
      </div>
      <div>
        <p class="label">注册总数</p>
        <p class="label-data">{{ header.totalRegis }}</p>
      </div>
    </div>
    <div>
      <el-date-picker
        :editable="false"
        v-model="dateValue"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        placeholder="选择日期"
        @change="dateChange">
      </el-date-picker>
      <!-- <el-select v-model="channelValue" placeholder="渠道" class="select" @change="channelChange">
        <el-option
          v-for="item in channelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <el-select v-model="userAppTypeValue" placeholder="用户类型" class="select" @change="userAppTypeChange">
        <el-option
          v-for="item in userAppTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="phoneTypeValue" placeholder="手机型号" class="select" @change="phoneTypeChange">
        <el-option
          v-for="item in phoneTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

       <el-input placeholder="请输入渠道名称" style="width:200px;" v-model="channelName"></el-input>

        <el-input placeholder="请输入手机号码" style="width:200px;" v-model="phoneNum"></el-input>

       <el-input placeholder="请输入IP地址" style="width:200px;" v-model="ipAddress"></el-input>
      <el-button icon="el-icon-refresh" @click="refreshClick">刷新</el-button>
      <span>自动刷新</span>
      <el-switch
        v-model="refresh"
        active-text="60秒"
        @change="refreshSwitch">
      </el-switch>
    </div>
    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
          type="index"
          align="center"
          label="编号"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          prop="phoneNum"
          label="手机号">
      </el-table-column>
      <el-table-column
          align="center"
          prop="phoneAddresses"
          label="登录地址">
      </el-table-column>
      <el-table-column
          align="center"
          prop="names"
          label="姓名">
      </el-table-column>
      <el-table-column
          align="center"
          prop="zmScore"
          label="芝麻分">
      </el-table-column>
       <el-table-column
          align="center"
          prop="miScore"
          label="米分">
      </el-table-column>
      <el-table-column
          align="center"
          prop="channelName"
          label="渠道">
      </el-table-column>
      <el-table-column
          align="center"
          label="用户类型">
          <template slot-scope="scope">
            <p>{{user_type[scope.row.userType + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="App类型">
          <template slot-scope="scope">
            <p>{{user_app_type[scope.row.userAppType + '']}}</p>
          </template>
      </el-table-column>
       <el-table-column
          align="center"
          label="用户手机类型">
          <template slot-scope="scope">
            <p>{{phone_type[scope.row.phoneType + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="ipAddress"
          label="ip地址">
      </el-table-column>
      <el-table-column
          align="center"
           width="200"
          label="注册时间">
          <template slot-scope="scope">
            {{_mapping.date_format(scope.row.createAt)}}
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
</template>
<script>
import _base from '@/services/base.js'
import _user from '@/services/user.js'
import _mapping from '@/utils/_mapping.js'
import { clearInterval, setInterval } from 'timers';
export default {
  data(){
    return {
      user_app_type: {
        '0': '未登录',
        '1': '贷超',
        '2': '现金贷'
      },
      userAppTypeOptions:  [{
          value: 0,
          label: '未登录'
      }, {
          value: 1,
          label: '贷超'
      }, {
          value: 2,
          label: '现金贷'
      }],
      phoneTypeOptions:[{
          value: 0,
          label: 'IOS'
      }, {
          value: 1,
          label: 'android'
      }],
      phone_type:{
        '0':'IOS',
        '1':'android'
      },
      user_type: {
        '0':'默认用户',
        '1':'流量用户',
        '2':'进件用户',
        '5':'已经推荐'
      },
      phoneTypeValue:'',
      channelName:'',
      phoneNum:'',
      ipAddress:'',
      refresh: false,
      loading: false,
      header: {
        todayRegis: 1000,
        yesterdayRegis: 1000,
        beforeRegis: 1000,
        weekRegis: 1000,
        monthRegis: 1000,
        totalRegis: 1000
      },
      tableData: [{
        
      }],
      query: {
        pageSize: 30,
        pageNum: 1
      },
      totalNum: 0,
      dateValue: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      channelOptions: [],
      channelValue: '',
      userAppTypeValue:'',
      t: null
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val
      this.getUserList()
    },
    // 日期改变
    dateChange(val){
      console.log('dateValue', this.dateValue)
      this.getUserList()
    },
    // 渠道改变
    channelChange(val){
      console.log('channelValue', this.channelValue)
      this.getUserList()
    },
     // 状态改变
    userAppTypeChange(val){
      this.getUserList()
    },
    phoneTypeChange(val){
      this.getUserList()
    },
    // 获取渠道列表
    getchannel(){
      _base.getChannelList()
      .then(res => {
        if(res.data && res.data.length){
          res.data.map(json => {
            let item = {}
            item.value = json.channelId
            item.label = json.name
            this.channelOptions.push(item)
          })
        }
      })
    },
    // 获取用户列表
    getUserList(){
      let params = {
        channelId: this.channelValue,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        searchDate: this.dateValue,
        ipAddress: this.ipAddress,
        channelName:this.channelName,
        userAppType: this.userAppTypeValue,
        phoneNum :this.phoneNum,
        phoneType:this.phoneTypeValue

      }
      _user.userList(params)
      .then(res => {
        console.log('userlist', res.data)
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    // 获取用户统计字段
    getUserStatistic(){
      _user.userStatistic({})
      .then(res => {
        console.log('userStatistic', res.data)
        this.header = {
          todayRegis: res.data.todayRegisterNum || 0,
          yesterdayRegis: res.data.yestodayRegisterNum || 0,
          beforeRegis: res.data.lastYestodayRegisterNum || 0,
          weekRegis: res.data.weekRegisterNum || 0,
          monthRegis: res.data.monthRegisterNum || 0,
          totalRegis: res.data.totalRegisterNum || 0
        }
      })
    },
    // 刷新按钮
    refreshClick(){
      this.getUserStatistic()
      this.getUserList()
    },
    // 打开自动刷新
    refreshSwitch(val){
      console.log('refresh', this.refresh)
      if(this.refresh){
        clearInterval(this.t)
        this.t = setInterval(() => {
          this.getUserStatistic()
          this.getUserList()
        }, 60*1000)
      }else{
        clearInterval(this.t)
      }
    }
  },
  created(){
    this.dateValue = this._mapping.date_format2(new Date())
    this.getchannel()
    this.getUserStatistic()
    this.getUserList()
  },
  destroyed(){
    clearInterval(this.t)
  }
}
</script>
<style lang="scss" scoped>
.wrap{
  .statistics-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    div{
      width:180px;
      height:90px;
      box-shadow: 0 0 10px #ccc;
      padding: 25px;
      text-align: center;
      .label{
        font-weight: bold;
        color: #409EFF;
        font-size: 14px;
      }
      .label-data {
        font-weight: bold;
        margin-top: 5px;
        color: #999;
      }
    }
  }
  .table{
    margin-top: 10px;
    margin-bottom: 25px;
  }
}
</style>


